<template>
  <div class="more-nav-container pt-7">
    <div class="nav-block d-flex flex-wrap px-7">
      <a v-for="item in navList" :key="item" href="#" class="nav-item mb-6">
        <img :src="'/static/images/page/' + item.img" class="nav-i">
        <p class="fs-sm text-center">{{item.name}}</p>
      </a>
    </div>
  </div>
</template>
<script>
import { nav } from '@/variables/siteNav'
export default {
  data() {
    return {
      navList: nav
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.nav-block {
  margin-left: -20rpx;
  margin-right: -20rpx;
  .nav-item {
    width: 20%;
    .nav-i {
      display: block;
      width: 110rpx;
      height: 100rpx;
      margin: 0 auto 12rpx;
    }
  }
}
</style>